<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="text">
    <script>
        let timer;
        // 当输入内容结束后，打印输入的内容
        // 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
        // document.querySelector('input').onkeyup = function () {
        //     clearTimeout(timer);
        //     let content = this.value;
        //     timer = setTimeout(() => {
        //         console.log(content); // 现在是打印结果，当初的案例是发送请求
        //     }, 1000)
        // }
        document.querySelector('input').onkeyup = debounce(getValue, 1000)

        function getValue() {
            let input = document.querySelector('input')
            let content = input.value
            console.log(content)
        }

        function debounce(func, wait) {
            let timeout;
            return function () {
                let context = this;
                let args = arguments;

                if (timeout) clearTimeout(timeout);

                let callNow = !timeout;
                timeout = setTimeout(() => {
                    timeout = null;
                }, wait)

                if (callNow) func.apply(context, args)
            }
        }
    </script>
</body>

</html>